// 1.1 获取裁剪区域的 DOM 元素
let $image = $('.container img')

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    preview: '.preview',
}

// 1.3 创建裁剪区域
$image.cropper(options)

// 点击button按钮的时候，触发点击了文件选择框
$('#btnChooseImage').click(function () {
    $('#file').click()
})

// change 事件注册给谁？  给文件选择框
$('#file').on('change', function () {
    // 获取用户的文件
    const file = this.files[0]
    console.log('🚀 ~ file: user_avatar.js:23 ~ file:', file)

    if (!file) {
        // 当file不存在 ==> 用户点击了取消，file就是undefined，阻止后续代码执行（否则会报错）
        return
    }

    // 把文件对象转成对应的地址
    const filesrc = URL.createObjectURL(file)
    // console.log('🚀 ~ file: user_avatar.js:27 ~ filesrc:', filesrc)

    $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', filesrc) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
})

// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let canvasObj = $image.cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
    })

    // 把图片转成base64格式
    let baseStr = canvasObj.toDataURL('image/png') // 把canvas图片转成base64格式的字符串
    console.log('🚀 ~ file: user_avatar.js:51 ~ baseStr:', baseStr)

    // axios 发送请求
    //  数据 就是 avatar=base64的字符串    需要对 base64 字符串进行编码处理
    axios
        .post('/my/update/avatar', `avatar=${encodeURIComponent(baseStr)}`)
        .then(({ data: { message, status } }) => {
            if (status !== 0) {
                // 失败
                return layer.msg(message)
            }

            layer.msg(message)

            // 调用父页面index页面的getUserInfo函数 ==> 重新渲染展示头像
            window.parent.getUserInfo()
        })
})
